<template>
	<el-dialog :title="params.fullDateStr+'的台账详情'" :visible.sync="dialogVisible2" width="738px" append-to-body>
		<!-- Header -->
		<div class="">

			<div class="displayFlexBet">
				<div style="color: #3A3EF4;" class="displayFlex mb10 point" @click="editThis">
					<span class="ml10">编辑</span>
				</div>

				<div style="color: #3A3EF4;" class="displayFlex mb10">
					<img src="../../../assets/sIcon179.png" style="width: 20px;height: 20px;" />
					<span class="ml10">回今天</span>
				</div>
			</div>

			<div class="displayFlexBet">
				<div style="width: 60px;line-height: 40px;background: #FFFFFF;border-radius: 4px;border: 1px solid #E7E7E7;"
					class="textCenter" @click="nextDay">
					<img src="@/assets/sIcon181.png" style="width: 23px;height: 23px;vertical-align: middle;" />
				</div>
				<div style="background: #E7E7E7;line-height: 40px;width: 100%;" class="textCenter font14 color333">
					{{ params.fullDateStr }}
				</div>
				<div style="width: 60px;line-height: 40px;background: #FFFFFF;border-radius: 4px;border: 1px solid #E7E7E7;"
					class="textCenter" @click="previousDay">
					<img src="@/assets/sIcon180.png" style="width: 23px;height: 23px;vertical-align: middle;" />
				</div>
			</div>
		</div>

		<!-- Info Section -->
		<div style="padding: 20px 60px;">
			<div class="info-row">
				<span class="info-label">生产工况</span>
				<span class="info-value status-abnormal" v-if="recordDet.workStatus == 'NORMAL'"
					style="background: #0046C2;">{{ recordDet.workStatusStr }}</span>
				<span class="info-value status-abnormal" v-else>{{ recordDet.workStatusStr }}</span>
			</div>
			<!-- <div class="info-row">
					<span class="info-label">异常内容</span>
					<span class="info-value">{{ productionStatus.details }}</span>
				</div> -->
			<div class="info-row">
				<span class="info-label">产品产量</span>
				<span class="info-value">
					<div v-for="(item,index) in recordDet.productList" :key="index" class="color333 font14"
						:class="[index == (recordDet.productList.length - 1)?'':'mb10']">
						<span>{{item.productName}}</span>
						<span>{{item.qty}}{{item.unitValue}}</span>
					</div>
				</span>
			</div>
			<div class="info-row">
				<span class="info-label">原辅料</span>
				<span class="info-value">
					<div v-for="(item,index) in recordDet.materialList" :key="index" class="color333 font14"
						:class="[index == (recordDet.materialList.length - 1)?'':'mb10']">
						<span>{{item.materialName}}</span>
						<span>{{item.qty}}{{item.unitValue}}</span>
					</div>
				</span>
			</div>
			<div class="info-row">
				<span class="info-label">能耗</span>
				<span class="info-value">
					<div v-for="(item,index) in recordDet.energyList" :key="index" class="color333 font14"
						:class="[index == (recordDet.energyList.length - 1)?'':'mb10']">
						<span>{{item.energyName}}：</span>
						<span>{{item.qty}}{{item.unit}}</span>
					</div>
				</span>
			</div>
		</div>

		<div v-for="(item,index) in dataList1" :key="item.installationId" class="mb10">
			<div style="background: #FFFFFF;border-radius: 4px;border: 1px solid #E7E7E7;padding: 19px 27px;">
				<div class="displayFlexBet">
					<div class="color333 font14">{{item.installationName}}</div>
					<div class="color888 font14">运行{{item.runHours}}小时</div>
				</div>
				<div class="displayFlex mt10" style="flex-wrap: wrap;">
					<div v-if="item.paramList.length ==0" class="color888 font14">暂无参数</div>
					<div v-for="(item2,index2) in item.paramList" :key="index+index2" class="mr40 mb10 point"
						@click="selectItem1Func(item2,'chart1'+index)"
						:class="[(selectItems.some(obj => obj.parameterId === item2.parameterId))?'selected':item2.textColor]">
						<span class="font14">{{item2.parameterName}}：</span>
						<span class="font14">{{item2.statusStr}}</span>
						<!-- <span class="font14">{{item2.latestAmount || '--'}}{{item2.unitCode}}</span> -->
					</div>
				</div>
			</div>
			<div v-if="item.paramList.length" :id="'chart1'+index"
				style="height: 200px;width: 100%;background: #F3F6F9;border-radius: 4px;border: 1px solid #E7E7E7;">
			</div>
		</div>

		<div v-for="(item,index) in dataList2" :key="item.installationId" class="mb10">
			<div style="background: #FFFFFF;border-radius: 4px;border: 1px solid #E7E7E7;padding: 19px 27px;">
				<div class="displayFlexBet">
					<div class="color333 font14">{{item.installationName}}</div>
					<div class="color888 font14">运行{{item.runHours}}小时</div>
				</div>
				<div class="displayFlex mt10" style="flex-wrap: wrap;">
					<div v-if="item.paramList.length ==0" class="color888 font14">暂无参数</div>
					<div v-for="(item2,index2) in item.paramList" :key="index+index2" class="mr40 mb10 point"
						@click="selectItem1Func(item2),'chart2'+index"
						:class="[(selectItems.some(obj => obj.parameterId === item2.parameterId))?'selected':item2.textColor]">
						<span class="font14">{{item2.parameterName}}：</span>
						<span class="font14">{{item2.statusStr}}</span>
						<!-- <span class="font14">{{item2.latestAmount || '--'}}{{item2.unitCode}}</span> -->
					</div>
				</div>
			</div>
			<div v-if="item.paramList.length" :id="'chart2'+index"
				style="height: 200px;width: 100%;background: #F3F6F9;border-radius: 4px;border: 1px solid #E7E7E7;">
			</div>
		</div>

		<div v-for="(item,index) in dataList3" :key="item.installationId" class="mb10">
			<div style="background: #FFFFFF;border-radius: 4px;border: 1px solid #E7E7E7;padding: 19px 27px;">
				<div class="displayFlexBet">
					<div class="color333 font14">{{item.installationName}}</div>
					<div class="color888 font14">运行{{item.runHours}}小时</div>
				</div>
				<div class="displayFlex mt10" style="flex-wrap: wrap;">
					<div v-if="item.paramList.length ==0" class="color888 font14">暂无参数</div>
					<div v-for="(item2,index2) in item.paramList" :key="index+index2" class="mr40 mb10 point"
						@click="selectItem1Func(item2,'chart3'+index)"
						:class="[(selectItems.some(obj => obj.parameterId === item2.parameterId))?'selected':item2.textColor]">
						<span class="font14">{{item2.parameterName}}：</span>
						<span class="font14">{{item2.statusStr}}</span>
						<!-- <span class="font14">{{item2.latestAmount || '--'}}{{item2.unitCode}}</span> -->
					</div>
				</div>
			</div>
			<div v-if="item.paramList.length" :id="'chart3'+index"
				style="height: 200px;width: 100%;background: #F3F6F9;border-radius: 4px;border: 1px solid #E7E7E7;">
			</div>
		</div>

		<div v-for="(item,index) in dataList4" :key="item.outletId" class="point mb10">
			<div style="background: #FFFFFF;border-radius: 4px;border: 1px solid #E7E7E7;padding: 19px 27px;">
				<div class="displayFlexBet">
					<div class="color333 font14">{{item.outletName}}</div>
					<!-- <div class="color888 font14">运行{{item.runHours}}小时</div> -->
				</div>
				<div class="displayFlex mt10" style="flex-wrap: wrap;">
					<div v-if="item.pollutionList.length ==0" class="color888 font14">暂无污染物</div>
					<div v-for="(item2,index2) in item.pollutionList" :key="index+index2" class="mr40 mb10 point"
						@click="selectItem2Func(item2,'chart4'+index)"
						:class="[(selectItems.some(obj => obj.pollutionId === item2.pollutionId))?'selected':item2.textColor]">
						<span class="font14">
							{{item2.pollutionName}}
						</span>
						<span class="font14">：{{item2.statusStr}}</span>
					</div>
				</div>
			</div>
			<div :id="'chart4'+index"
				style="height: 200px;width: 100%;background: #F3F6F9;border-radius: 4px;border: 1px solid #E7E7E7;"
				v-if="item.pollutionList.length">
			</div>
		</div>

		<div v-for="(item,index) in dataList5" :key="item.outletId" class="point mb10">
			<div style="background: #FFFFFF;border-radius: 4px;border: 1px solid #E7E7E7;padding: 19px 27px;">
				<div class="displayFlexBet">
					<div class="color333 font14">{{item.outletName}}</div>
					<!-- <div class="color888 font14">运行{{item.runHours}}小时</div> -->
				</div>
				<div class="displayFlex mt10" style="flex-wrap: wrap;">
					<div v-if="item.pollutionList.length ==0" class="color888 font14">暂无污染物</div>
					<div v-for="(item2,index2) in item.pollutionList" :key="index+index2" class="mr40 mb10 point"
						@click="selectItem2Func(item2,'chart5'+index)"
						:class="[(selectItems.some(obj => obj.pollutionId === item2.pollutionId))?'selected':item2.textColor]">
						<span class="font14">{{item2.pollutionName}}</span>

						<span class="font14">：{{item2.statusStr}}</span>
					</div>
				</div>
			</div>
			<div :id="'chart5'+index"
				style="height: 200px;width: 100%;background: #F3F6F9;border-radius: 4px;border: 1px solid #E7E7E7;"
				v-if="item.pollutionList.length">
			</div>
		</div>
	</el-dialog>
</template>

<script>
	import {
		Session
	} from '@/utils/storage';
	import moment from 'moment'
	import * as echarts from 'echarts';

	let that
	export default {
		data() {
			return {
				params: {},
				params2: {},
				dialogVisible2: false,
				recordDet: {},
				currentDate: moment().format('YYYY-MM-DD'),
				dataList1: [],
				dataList2: [],
				dataList3: [],
				dataList4: [],
				dataList5: [],
				selectItems: []
			}
		},
		mounted: function() {
			that = this

		},

		methods: {

			editThis() {
				that.$emit('editThis', that.params)
			},

			selectItem1Func(item, chartId) {

				that.selectItems = [item]
				that.getEquipDayParameterAmountList(item, chartId)
			},

			selectItem2Func(item, chartId) {
				that.selectItems = [item]
				that.getDayPollutionHourAmountList(item, chartId)
			},

			open(item) {
				that.params = item
				that.getData()
			},

			getData() {
				that.ajax({
					url: '/productionEquipment/stdBook/getProdDayDet',
					contentType: 'application/json',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: that.params.fullDateStr
					}),
					success: function(result) {
						that.recordDet = result.data
						that.dialogVisible2 = true
					},
				})

				that.ajax({
					url: '/productionEquipment/stdBook/getProdEquipList',
					contentType: 'application/json',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId
					}),
					success: function(result) {
						that.dataList1 = result.data
						for (let key in result.data) {
							let item = result.data[key]
							if (item.paramList.length) {
								for (let item2 of item.paramList) {
									if (item2.status == 'NORMAL') item2.textColor = "color888"
									if (item2.status == 'ABNORMAL') item2.textColor = "color-danger"
									item2.installationId = item.installationId
								}
								that.selectItems.push(item.paramList[0])
								that.getEquipDayParameterAmountList(item.paramList[0], "chart1" + key)
							}
						}
					},
				})

				that.ajax({
					url: '/productionEquipment/stdBook/getGasEquipList',
					contentType: 'application/json',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId
					}),
					success: function(result) {
						that.dataList2 = result.data
						for (let key in result.data) {
							let item = result.data[key]
							if (item.paramList.length) {
								for (let item2 of item.paramList) {
									if (item2.status == 'NORMAL') item2.textColor = "color888"
									if (item2.status == 'ABNORMAL') item2.textColor = "color-danger"
									item2.installationId = item.installationId
								}
								that.selectItems.push(item.paramList[0])
								that.getEquipDayParameterAmountList(item.paramList[0], "chart2" + key)
							}
						}
					},
				})

				that.ajax({
					url: '/productionEquipment/stdBook/getWaterEquipList',
					contentType: 'application/json',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId
					}),
					success: function(result) {
						that.dataList3 = result.data
						for (let key in result.data) {
							let item = result.data[key]
							if (item.paramList.length) {
								for (let item2 of item.paramList) {
									if (item2.status == 'NORMAL') item2.textColor = "color888"
									if (item2.status == 'ABNORMAL') item2.textColor = "color-danger"
								}
								that.selectItems.push(item.paramList[0])
								that.getEquipDayParameterAmountList(item.paramList[0], "chart3" + key)
							}
						}
					},
				})

				that.ajax({
					url: '/productionEquipment/stdBook/getGasEquipOutletList',
					contentType: 'application/json',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId
					}),
					success: function(result) {
						that.dataList4 = result.data
						for (let key in result.data) {
							let item = result.data[key]
							if (item.pollutionList.length) {
								for (let item2 of item.pollutionList) {
									if (item2.status == 'NORMAL') item2.textColor = "color888"
									if (item2.status == 'ABNORMAL') item2.textColor = "color-danger"
								}
								that.selectItems.push(item.pollutionList[0])

								that.getDayPollutionHourAmountList(item.pollutionList[0], "chart4" + key)
							}
						}
					},
				})

				that.ajax({
					url: '/productionEquipment/stdBook/getWaterEquipOutletList',
					contentType: 'application/json',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId
					}),
					success: function(result) {
						that.dataList5 = result.data
						for (let key in result.data) {
							let item = result.data[key]
							if (item.pollutionList.length) {
								for (let item2 of item.pollutionList) {
									if (item2.status == 'NORMAL') item2.textColor = "color888"
									if (item2.status == 'ABNORMAL') item2.textColor = "color-danger"
								}
								that.selectItems.push(item.pollutionList[0])
								that.getDayPollutionHourAmountList(item.pollutionList[0], "chart5" + key)
								that.$forceUpdate()
								console.log(that.selectItems)
							}
						}
					},
				})
			},

			getEquipDayParameterAmountList(params, chartId) {
				params.recordDate = that.params.fullDateStr

				that.ajax({
					url: '/productionEquipment/stdBook/getEquipDayParameterAmountList',
					contentType: 'application/json',
					data: JSON.stringify(params),
					success: function(result) {
						let data1 = []
						let data2 = []
						for (let item of result.data) {
							data1.push(item.amount)
							data2.push(item.date.split(" ")[1])
						}
						that.formLineData(data1, data2, chartId)
					},
				})
			},

			getDayPollutionHourAmountList(params, chartId) {
				params.recordDate = that.params.fullDateStr
				that.ajax({
					url: '/productionEquipment/stdBook/getDayPollutionHourAmountList',
					contentType: 'application/json',
					data: JSON.stringify(params),
					success: function(result) {
						let data1 = []
						let data2 = []
						for (let item of result.data) {
							data1.push(item.amount)
							data2.push(item.createTime.split(" ")[1])
						}
						that.formLineData(data1, data2, chartId)
					},
				})
			},

			previousDay() {
				this.params.fullDateStr = moment(this.params.fullDateStr).add(1, 'days').format('YYYY-MM-DD')
				that.getData()
			},
			nextDay() {
				this.params.fullDateStr = moment(this.params.fullDateStr).subtract(1, 'days').format('YYYY-MM-DD')
				that.getData()
			},

			goToToday() {
				this.params.fullDateStr = moment().format('YYYY-MM-DD')
				that.getData()
			},

			async formLineData(data1, data2, chartId) {
				setTimeout(function() {
					var chartDom = document.getElementById(chartId);
					var myChart = echarts.init(chartDom);
					var option;

					option = {
						tooltip: {
							trigger: 'item',
							axisPointer: {
								type: 'shadow'
							}
						},
						grid: {
							top: "10%",
							bottom: "15%",
							left: "5%"
						},
						xAxis: {
							type: 'category',
							data: data2,
							splitLine: {
								show: false,
							},
							axisTick: {
								show: false // 不显示坐标轴刻度线
							},
							axisLine: {
								lineStyle: {
									opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
								}
							},
						},
						yAxis: {
							type: 'value',
							splitLine: {
								show: true,
								lineStyle: {
									color: ["#FAFBFC"],
								},
							},
							axisTick: {
								show: false // 不显示坐标轴刻度线
							},
							axisLabel: {
								//y轴文字的配置
								textStyle: {
									color: "rgba(215, 215, 215, 1)",
								},
								// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
							},
							axisLine: {
								lineStyle: {
									opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
								}
							},
						},
						series: [{
							data: data1,
							type: 'line'
						}]
					};

					option && myChart.setOption(option);
				}, 1000)
			},

		}
	}
</script>

<style scoped>
	.color-danger {
		color: #FE4F00;
	}

	.selected {
		color: #007bff !important;
		font-weight: bold;
	}

	.date-item>>>.el-input__prefix,
	.date-item>>>.el-input__suffix {
		display: none !important;
	}

	.date-item>>>.el-input__inner {
		height: unset !important;
		padding: 0 2px !important;
		font-family: Source Han Sans CN !important;
		font-weight: 400 !important;
		color: #555 !important;
		border-bottom: unset;
		border-top: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		background: none !important;
		border-radius: 0 !important;
		text-align: center;
		font-size: 15px !important;
		width: 80px !important;
	}

	.daily-ledger {
		font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
		color: #333;
		background-color: #f7f8fa;
		padding: 15px;
		border: 1px solid #e8e8e8;
		border-radius: 4px;
		max-width: 1000px;
		margin: 20px auto;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 10px;
		border-bottom: 1px solid #e8e8e8;
		margin-bottom: 15px;
	}

	.header .title {
		font-size: 18px;
		font-weight: bold;
		color: #303133;
	}

	.date-selector {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.date-selector .date-text {
		font-size: 16px;
		color: #606266;
		margin: 0 5px;
	}

	.arrow-btn,
	.today-btn,
	.close-btn {
		background-color: #fff;
		border: 1px solid #dcdfe6;
		color: #606266;
		padding: 5px 10px;
		border-radius: 4px;
		cursor: pointer;
		font-size: 14px;
		transition: background-color 0.3s, border-color 0.3s;
	}

	.arrow-btn:hover,
	.today-btn:hover,
	.close-btn:hover {
		border-color: #c0c4cc;
		background-color: #f5f7fa;
	}

	.today-btn {
		padding: 5px 8px;
		margin-left: 5px;
	}

	.close-btn {
		font-size: 20px;
		font-weight: bold;
		border: none;
		background: none;
		padding: 0 5px;
	}

	.info-section {
		background-color: #ffffff;
		padding: 15px;
		border-radius: 4px;
		margin-bottom: 15px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.info-row {
		display: flex;
		align-items: center;
		padding: 8px 0;
		font-size: 14px;
	}

	.info-label {
		width: 70px;
		color: #888;
		font-weight: 500;
		flex-shrink: 0;
		margin-right: 20px;
		text-align: right;
		font-size: 14px;
	}

	.info-value {
		flex-grow: 1;
		color: #333;
		background-color: #F3F6F9;
		padding: 18px 17px;
		border-radius: 4px;
	}

	.status-abnormal {
		background-color: #ff6347;
		color: white;
		font-weight: bold;
		text-align: left;
		padding: 18px 17px;
		border-radius: 4px;
		display: inline-block;
		min-width: 60px;
	}

	.status-bar-normal {
		background-color: #007bff;
		color: white;
		padding: 10px 15px;
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		border-radius: 4px;
		margin-bottom: 20px;
	}

	.charts-section {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.chart-container {
		background-color: #ffffff;
		padding: 15px;
		border-radius: 4px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.chart-header {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-bottom: 1px solid #f0f0f0;
		flex-wrap: wrap;
		gap: 15px;
	}

	.chart-title {
		font-size: 16px;
		font-weight: bold;
		color: #303133;
		margin-right: auto;
	}

	.chart-status {
		font-size: 13px;
		color: #606266;
	}

	.chart-status::before {
		content: '•';
		color: #67c23a;
		margin-right: 4px;
		font-size: 16px;
		vertical-align: middle;
	}

	.chart-duration {
		font-size: 12px;
		color: #909399;
		background-color: #f4f4f5;
		padding: 3px 8px;
		border-radius: 10px;
	}

	.chart-body {
		width: 100%;
		height: 250px;
	}
</style>